<template>
  <div class="ma-wang-editor">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 400px; overflow-y: hidden;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
      @onDestroyed="handleDestroyed"
      @onFocus="handleFocus"
      @onBlur="handleBlur"
      @customAlert="customAlert"
    />
  </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, computed, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'

interface Props {
  modelValue?: string
  height?: number
  disabled?: boolean
  placeholder?: string
  mode?: 'default' | 'simple'
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  height: 400,
  disabled: false,
  placeholder: '请输入内容...',
  mode: 'default'
})

const emit = defineEmits<{
  'update:modelValue': [value: string]
  'change': [value: string]
}>()

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef<IDomEditor>()

// 内容 HTML
const valueHtml = computed({
  get: () => props.modelValue,
  set: (value: string) => {
    emit('update:modelValue', value)
    emit('change', value)
  }
})

// 模拟 ajax 异步获取内容
// onMounted(() => {
//     setTimeout(() => {
//         valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
//     }, 1500)
// })

const toolbarConfig: Partial<IToolbarConfig> = {
  // 工具栏配置
  toolbarKeys: [
    // 菜单 key
    'headerSelect',
    '|',
    'bold',
    'italic',
    'underline',
    'through',
    'code',
    'sup',
    'sub',
    'clearStyle',
    '|',
    'color',
    'bgColor',
    '|',
    'fontSize',
    'fontFamily',
    'lineHeight',
    '|',
    'bulletedList',
    'numberedList',
    'todo',
    {
      key: 'group-justify',
      title: '对齐',
      iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z"></path></svg>',
      menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify']
    },
    '|',
    'emotion',
    'insertLink',
    {
      key: 'group-image',
      title: '图片',
      iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
      menuKeys: ['insertImage', 'uploadImage']
    },
    {
      key: 'group-video',
      title: '视频',
      iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.296 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.296-244.16-42.816-351.904zM384 704V320l320 192-320 192z"></path></svg>',
      menuKeys: ['insertVideo', 'uploadVideo']
    },
    'insertTable',
    'codeBlock',
    'divider',
    '|',
    'undo',
    'redo',
    '|',
    'fullScreen'
  ]
}

const editorConfig: Partial<IEditorConfig> = {
  placeholder: props.placeholder,
  readOnly: props.disabled,
  
  // 菜单配置
  MENU_CONF: {
    // 配置上传图片
    uploadImage: {
      // 自定义上传
      async customUpload(file: File, insertFn: any) {
        // 这里应该调用您的实际上传API
        // 暂时使用模拟数据
        console.log('上传图片:', file.name)
        
        // 模拟上传成功
        setTimeout(() => {
          const url = 'https://via.placeholder.com/400x300.png'
          insertFn(url, '示例图片', url)
        }, 1000)
      }
    },
    
    // 配置上传视频
    uploadVideo: {
      // 自定义上传
      async customUpload(file: File, insertFn: any) {
        // 这里应该调用您的实际上传API
        console.log('上传视频:', file.name)
        
        // 模拟上传成功
        setTimeout(() => {
          const url = 'https://www.w3school.com.cn/i/movie.mp4'
          insertFn(url)
        }, 1000)
      }
    }
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  console.log('wangEditor 编辑器创建完成:', editor.id)
}

const handleChange = (editor: IDomEditor) => {
  const html = editor.getHtml()
  console.log('内容变化:', html.length, '字符')
  valueHtml.value = html
}

const handleDestroyed = (editor: IDomEditor) => {
  console.log('wangEditor 编辑器销毁:', editor.id)
}

const handleFocus = (editor: IDomEditor) => {
  console.log('wangEditor 编辑器获得焦点:', editor.id)
}

const handleBlur = (editor: IDomEditor) => {
  console.log('wangEditor 编辑器失去焦点:', editor.id)
}

const customAlert = (info: string, type: string) => {
  alert(`【自定义提示】${type} - ${info}`)
}

// 监听外部内容变化
watch(() => props.modelValue, (newValue) => {
  if (newValue !== valueHtml.value) {
    valueHtml.value = newValue
  }
})

// 监听高度变化
watch(() => props.height, (newHeight) => {
  // 动态设置编辑器高度
  const editorElem = document.querySelector('.ma-wang-editor .w-e-text-container') as HTMLElement
  if (editorElem) {
    editorElem.style.height = `${newHeight - 50}px`
  }
})
</script>

<style scoped>
.ma-wang-editor {
  border: 1px solid #ccc;
  z-index: 100;
  border-radius: 6px;
  overflow: hidden;
}

.ma-wang-editor :deep(.w-e-text-container) {
  height: 350px !important;
}

.ma-wang-editor :deep(.w-e-toolbar) {
  border-bottom: 1px solid #e8e8e8 !important;
}

/* 确保编辑器在表单中的样式 */
.ma-wang-editor :deep(.w-e-text-placeholder) {
  color: #999;
  font-style: normal;
}

/* 暗色主题适配 */
:global([data-theme="dark"]) .ma-wang-editor {
  border-color: var(--color-border-2);
}

:global([data-theme="dark"]) .ma-wang-editor :deep(.w-e-toolbar) {
  background: var(--color-bg-2);
  border-color: var(--color-border-2);
}

:global([data-theme="dark"]) .ma-wang-editor :deep(.w-e-text-container) {
  background: var(--color-bg-2);
  color: var(--color-text-1);
}
</style> 